<!-- 布局 -->
<template>
  <el-container class="layout-container-demo">
    <!-- 侧边菜单 -->
    <el-aside width="200px">
      <!-- 导航菜单 -->
      <el-menu
        background-color="#000"
        text-color="#fff"
        router
        :collapse-transition="false"
        :default-active="$route.path"
      >
        <el-menu-item index="/">
          <template #title>
            <el-dropdown style="width: 100%">
              <el-button style="width: 100%" type="primary">新建</el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="$router.push('/article/amEditor')">
                    新建文章-协同编辑器
                  </el-dropdown-item>

                  <el-dropdown-item @click="$router.push('/article/editor')">
                    新建文章
                  </el-dropdown-item>

                  <el-dropdown-item @click="$router.push('/page/editor')">
                    新建页面
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </template>
        </el-menu-item>

        <el-menu-item index="/">
          <el-icon><pear /></el-icon>
          <template #title>工作台</template>
        </el-menu-item>

        <el-sub-menu index="/article">
          <template #title>
            <el-icon><edit /></el-icon>
            <span>文章管理</span>
          </template>

          <el-menu-item index="/article">
            <el-icon><edit /></el-icon>
            <template #title>所有文章</template>
          </el-menu-item>

          <el-menu-item index="/article/classify">
            <el-icon><document-copy /></el-icon>
            <template #title>分类管理</template>
          </el-menu-item>

          <el-menu-item index="/article/tags">
            <el-icon><collection-tag /></el-icon>

            <template #title>标签管理</template>
          </el-menu-item>
        </el-sub-menu>

        <el-menu-item index="/page">
          <el-icon><document /></el-icon>

          <template #title>页面管理</template>
        </el-menu-item>

        <el-menu-item index="/knowledge">
          <el-icon><list /></el-icon>

          <template #title>知识小册</template>
        </el-menu-item>

        <el-menu-item index="/poster">
          <el-icon><tickets /></el-icon>

          <template #title>海报管理</template>
        </el-menu-item>

        <el-menu-item index="/comment">
          <el-icon><chat-dot-round /></el-icon>

          <template #title>评论管理</template>
        </el-menu-item>

        <el-menu-item index="/email">
          <el-icon><message /></el-icon>

          <template #title>邮件管理</template>
        </el-menu-item>

        <el-menu-item index="/file">
          <el-icon><folder /></el-icon>

          <template #title>文件管理</template>
        </el-menu-item>

        <el-menu-item index="/search">
          <el-icon><search /></el-icon>

          <template #title>搜索记录</template>
        </el-menu-item>

        <el-menu-item index="/visit">
          <el-icon><trend-charts /></el-icon>

          <template #title>访问统计</template>
        </el-menu-item>

        <el-menu-item index="/user">
          <el-icon><user /></el-icon>

          <template #title>用户管理</template>
        </el-menu-item>

        <el-menu-item index="/set">
          <el-icon><setting /></el-icon>

          <template #title>系统设置</template>
        </el-menu-item>
      </el-menu>
    </el-aside>

    <!-- 右侧内容 -->
    <el-container>
      <!-- 头部 -->
      <el-header style="height: auto">
        <el-dropdown
          style="display: flex; align-items: center; justify-content: flex-end"
        >
          <div class="el-dropdown-link">
            <div
              style="
                display: flex;
                align-items: center;
                cursor: pointer;
                height: 50px;
              "
            >
              <el-avatar :size="24" :src="$store.state.userInfo.url" />

              <span style="margin-left: 5px">
                Hi,{{ $store.state.userInfo.username }}
              </span>
            </div>
          </div>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>个人中心</el-dropdown-item>

              <el-dropdown-item>用户管理</el-dropdown-item>

              <el-dropdown-item>系统设置</el-dropdown-item>

              <el-dropdown-item @click="exit">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>

        <Breadcrumb :path="$route.path" :crumbs="$route.meta.crumbs" />
      </el-header>

      <!-- 内容 -->
      <el-main>
        <router-view />
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup>
import {
  Edit,
  User,
  Message,
  Folder,
  Search,
  Setting,
  ChatDotRound,
  CollectionTag,
  Document as document,
  TrendCharts,
  Tickets,
  List,
  DocumentCopy,
  Pear,
} from "@element-plus/icons-vue";
import { getUserInfo } from "@/utils";
import Breadcrumb from "@/components/Breadcrumb";
import router from "../../router";
import Cookies from "js-cookie";
import * as sysTool from "@/assets/js/systemTool";
import { ref, onMounted } from "vue";
import { apiAddVisit } from "@/api/visit";
import { useRoute } from "vue-router";

/**************************************************/

getUserInfo();

const exit = () => {
  Cookies.remove("token");

  router.push("/login");
};

/**************************************************/

const route = useRoute();

const url = ref("");
const ip = ref("");
const area = ref("");
const brower = ref("");
const os = ref("");

url.value = route.path;
ip.value = sessionStorage.getItem("ip");
area.value = sessionStorage.getItem("area");
brower.value = sysTool.GetCurrentBrowser();
os.value = sysTool.GetOs();

onMounted(() => {
  apiAddVisit({
    url: url.value,
    ip: ip.value,
    area: area.value,
    brower: brower.value,
    os: os.value,
  });
});
</script>

<style lang="scss">
.layout-container-demo .el-menu {
  height: 100%;
}

.layout-container-demo .el-main {
  padding-top: 0;
  padding-bottom: 0;
}

.el-aside {
  .el-tooltip__trigger {
    width: 100%;
  }
}
</style>
